<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>运动会</title>

  <link href="/css/common.css" rel="stylesheet">
  <link href="/css/index.css" rel="stylesheet">

  <% include common/main-lib.ejs %>

</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      <% include common/header.ejs %>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <% include common/aside.ejs %>
      </el-aside>
      <el-container>
        <el-main>
          <h1><%= pageName %></h1>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-upload
                  method="post"
                  enctype="multipart/form-data"
                  class="upload"
                  drag
                  ref="uploadScore"
                  action="/upload"
                  name="score"
                  :limit=1
                  :file-list="fileList"
                  :on-exceed="fileCountExceed"
                  :on-change="checkFile"
                  :on-success="successCallback"
                  :on-error="errorCallback"
                  :auto-upload="false"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__text">只能上传xlsx文件，且不超过1G</div>
                </el-upload>
                <el-button type="primary" @click="submitUpload">上传<i class="el-icon-upload el-icon--right"></i></el-button>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>


</div>


<script>
  new Vue({
    el: '#app',
    data () {
      return {
        fileList: []
      }
    },
    methods: {
      fileCountExceed () {
        this.$alert('一次只能上传1个文件', '报名表上传', {
          confirmButtonText: '确定'
        })
      },
      checkFile (file) {
        if (file.size > 1024000000) {
          this.$alert('文件大小不可超过1G', '作品上传', {
            confirmButtonText: '确定'
          })
          this.$data.fileList = []
        }
        if (file.name.split('.').splice(-1)[0]) {
          switch (file.name.split('.').splice(-1)[0]) {
            case 'xlsx':
              return
            default:
              this.$alert('只能上传xlsx文件', '报名表上传', {
                confirmButtonText: '确定'
              })
              this.$data.fileList = []
          }
        }
      },
      successCallback (response) {
        //  上传成功
        this.$message.success(response.msg || 'success upload');
        this.$data.fileList = [];
      },
      errorCallback (err) {
        this.$alert(err.msg || 'server error', 'error', {
          type: 'error',
          callback: () => {
            this.$data.fileList = []
          }
        })
      },
      submitUpload () {
        this.$refs.uploadScore.submit()
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  })
</script>

</body>
</html>
